<template>
  <div class="container" >
    <div class="input-suffix" >
      <el-input placeholder="搜索社团"  v-model="input" >
        <template #suffix>
          <el-icon class="el-icon-search" style="margin-right: 12px;"></el-icon>
        </template>
      </el-input>
    </div>
  </div>

  <div class="container1" >
    <div style="margin-left: 150px; margin-top: 20px; width: 1600px; height: 40px;">
      <el-select size='middle' v-model="selection1" multiple collapse-tags placeholder="社团类别" style="width: 200px;"  @input="updateFilter">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-select size='middle' v-model="selection2" multiple collapse-tags placeholder="所在校区" style="width: 200px;  margin-left:50px;"  @input="updateFilter">
        <el-option
          v-for="item in options1"
          :key="item.value1"
          :label="item.label1"
          :value="item.value1">
        </el-option>
      </el-select>

      <el-select size='middle' v-model="selection3" multiple collapse-tags placeholder="社团级别" style="width: 200px;  margin-left:50px;"  @input="updateFilter">
        <el-option
          v-for="item in options2"
          :key="item.value2"
          :label="item.label2"
          :value="item.value2">
        </el-option>
      </el-select>

      <el-switch v-model="value" inactive-text="全部" active-text="招新中" style="margin-left: 50px; width: 180px;"></el-switch>
    </div>
  </div>

  <div class="container2">
    <div style="width: 1200px; height:600px;margin-top: -2px;margin-left:-15px ">
      <el-row gutter="4" style=" margin-left: 170px;">
        <el-col :span="8" v-for="(club,index) in displayedClubs" :key="index">
          <el-card shadow="hover" :body-style="{ padding: '0px' }" class="clubInfo" style="height: 225px; width: 240px;margin-bottom: 10px;">
            <div style="height: 50px;width: 230px; display: inline-block; position: relative; cursor: pointer;">
              <img src="../assets/111.jpg" class="image" style="width: 100%;object-fit: contain;">
              <div @click="toggleCollect(club.Cid,index)">
<!--                <i :class="{'el-icon-star-on': collected[index] === 1, 'el-icon-star-off': collected[index] !== 1}" -->
<!--                :style="collected[index] === 1 ? 'color: #f9d423; font-size: 24px;position: absolute; top: 58px; right: 9px;' : -->
<!--                'color: black; font-size: 22px;position: absolute; top: 52px; right: 12px;'">-->
<!--                </i>-->
                <el-icon v-if="collected[index] === 1" :style="'color: #f9d423; font-size: 24px; position: absolute; top: 18px; right: 9px;'">
                  <StarFilled />
                </el-icon>
                <el-icon v-else :style="'color:#CCD8FFFF; font-size: 24px; position: absolute; top: 18px; right: 9px;'">
                  <Star />
                </el-icon>
              </div>
            </div>

            <div style="margin-top:4px; font-family: Arial; font-size: 18px;font-weight:600;">
              <span>{{club.Cname}}</span>
            </div>

            <div style="margin-top:5px;">
              <el-tag effect="dark" size='small' type="danger" style="opacity: 0.6; font-size: 11px; padding:  0px 12px; height:18px;">{{ getUnitText(club.Unit) }}</el-tag>
              <el-tag effect="dark" size='small' type="success" style=" margin-left: 6px; opacity: 0.6; font-size: 11px; padding: 2px 12px;height:18px;">{{ getTypeText(club.Type) }}</el-tag>
              <el-tag effect="dark" size='small' style="opacity: 0.6; margin-left: 6px; font-size: 11px; padding:2px 12px;height:18px;">{{ getAddressText(club.Address)}}</el-tag>
            </div>

            <div style="text-align: left; margin-left:12px; margin-top:6px; font-family: Arial; font-size: 14px;width: 220px; height: 38px;
              display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis; ">
              <span> <strong><span style="font-size: 14px;">社团简介：</span></strong> {{club.Introduction}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>

  <div style="margin-top: -450px;margin-left: -1100px;justify-content: center; ">
    <p ><button class="button"  @click="goRoute('/personalcenter')" style="background-color: transparent; border: 0;"><span style="font-size: 18px; font-weight:400;vertical-align: middle;">我的社团</span>
      <img src="../assets/旗子.png" style="width: 24px; height: 24px; margin-left: 20px;vertical-align: middle;"></button></p>
    <p style="margin-top: 20px;"><button @click="goRoute('/personalcenter')" class="button" style="background-color: transparent; border: 0;"><span style="font-size: 18px;font-weight:400;vertical-align: middle;">我的收藏</span>
      <img src="../assets/收藏.png"  style="width: 24px; height: 24%;margin-left: 20px;margin-top: 2px; vertical-align: middle;"></button></p>
    <p style="margin-top: 20px;"><button @click="goRoute('/createclub')" class="button" style="background-color: transparent; border: 0;"><span style="font-size: 18px;font-weight:400;vertical-align: middle;">创建社团</span>
      <img src="../assets/增加按钮.png" style="width: 24px; height: 24px;margin-left: 20px; margin-top: 2px;vertical-align: middle;"></button></p>
  </div>

  <div class="Cbottom-pagination">
    <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" style="height: 30px;width:80px; font-size:14px; background-color: rgba(33, 107, 33, 0.7);"
          :disabled="currentPage <= 1" @click="goToPage(currentPage-1)">上一页</el-button>
          <el-button type="primary" style="margin-left: 100px;height: 30px;width:80px; font-size:14px; background-color: rgba(33, 107, 33, 0.7);"
          :disabled="currentPage >= totalPages" @click="goToPage(currentPage+1)">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
      <div style="margin-top: -26px; margin-left: -6px; font-size: 20px;">
          <span >{{ currentPage}} / {{totalPages}}</span>
      </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      input: '',
      selection1: [],
      selection2: [],
      selection3:[],
      value:false,
      currentPage: 1,
      elementsPerPage:6,

      options: [{
        value: 1,
        label: '思想政治类'
      }, {
        value: 2,
        label: '学术科技类'
      }, {
        value: 3,
        label: '体育竞技类'
      }, {
        value: 4,
        label: '志愿公益类'
      }, {
        value: 5,
        label: '文化艺术类'
      }],

      options1: [{
        value1: 1,
        label1: '南校园'
      }, {
        value1: 2,
        label1: '北校园'
      }, {
        value1: 3,
        label1: '珠海校区'
      }, {
        value1: 4,
        label1: '深圳校区'
      }, {
        value1: 5,
        label1: '东校园'
      },{
        value1: 6,
        label1: '五校园'
      }],

      options2: [{
        value2: 1,
        label2: '校级'
      }, {
        value2: 2,
        label2: '院级'
      }],

      clubs:[],
      showclubs:[],
      images:[],
      collected:[],
    }
  },
  methods:{
    goRoute(route) {
      this.$router.push(route);
    },
    goToPage(pageNumber) {
      if (pageNumber > 0 && pageNumber <= this.totalPages) {
        this.currentPage = pageNumber;
      }
    },

    currentpage(len){
      this.currentPage = len==0?0:1;
    },

    toggleCollect(id,index) {
      const collectedStatus = this.collected[index];
      this.sendCollectStatus(id,collectedStatus);
      this.collected[index] = this.collected[index] === 1 ? 0 : 1;// 切换收藏状态
    },

    sendCollectStatus(id,collectedStatus) {
      const formData = new FormData()
      formData.append('uid', this.$store.state.userinfo.account)
      formData.append('cid',id)
      formData.append('collected',collectedStatus)
      // 使用axios或其他HTTP客户端库发送POST请求
      axios.post('http://localhost:8080/api/club/CollectClub', formData)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.error(error);
        });
      },

    updateFilter() {
      },
  },

  computed: {
    getUnitText() {
      return (Unit) => {
        switch (Unit) {
          case '校团委':
              return '校级';
          default:
              return '院级';
        }
      };
    },

    getUnitvalue() {
      return (Unit) => {
        switch (Unit) {
          case '校团委':
              return 1;
          default:
              return 2;
        }
      };
    },
    getTypeText() {
      return (type) => {
        switch (type) {
          case 1:
              return '思想政治类';
          case 2:
              return '学术科技类';
          case 3:
              return '体育竞技类';
          case 4:
              return '志愿公益类';
          case 5:
              return '文化艺术类';
          default:
              return '';
        }
      };
    },

    getAddressText() {
      return (address) => {
        switch (address) {
          case 1:
              return '南校区';
          case 2:
              return '北校区';
          case 3:
              return '珠海校区';
          case 4:
              return '深圳校区';
          case 5:
              return '东校区';
          case 6:
              return '五校园'
          default:
              return '';
        }
      };
    },

    totalPages() {
      return Math.ceil(this.showclubs.length / this.elementsPerPage);
    },

    displayedClubs() {
      const startIndex = (this.currentPage - 1) * this.elementsPerPage;
      const endIndex = startIndex + this.elementsPerPage;
      return this.showclubs.slice(startIndex, endIndex);
    },

    filteredClubs() {
      const filtedClubs= this.clubs.filter(club => {
        const TypeMatch = this.selection1.length === 0 || this.selection1.includes(club.Type);
        const campusMatch = this.selection2.length === 0 || this.selection2.includes(club.Address);
        const levelMatch = this.selection3.length === 0 || this.selection3.includes(this.getUnitvalue(club.Unit));
        const statusMatch = this.value ? club.State === 1 : true;
        const inputMatch = this.input ? club.Cname.includes(this.input) : true;
        return inputMatch&&TypeMatch && campusMatch && levelMatch && statusMatch;
      });
      this.currentpage(filtedClubs.length)
        return filtedClubs;
    },
  },

  watch: {
    filteredClubs(newVal) {
      this.showclubs = newVal; // 确保 showClubs 总是与 filteredClubs 同步
    },
  },

  mounted() {
    const params = new URLSearchParams();
    params.append('uid', this.$store.state.userinfo.account);

    axios.get('http://localhost:8080/api/club', { params })
      .then(response => {
        this.clubs = response.data.data.clubs;
        this.showclubs =response.data.data.clubs;
        this.images = response.data.data.images;
        this.collected = response.data.data.collected;
      })
      .catch(error => {
        console.error('Error fetching clubs:', error);
      });
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
}

.container1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container2{
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-suffix {
  display: flex;
  justify-content: center;
  width: 280px;
  height: 30px;
}

.input-suffix .el-input input {
  font-size: 16px;
  font-family: Arial;
  margin-left: 10px;
}

.button:hover span {
      color: hwb(240 3% 4% / 0.8);
  }

.Cbottom-pagination {
  position: relative;
  justify-content: center;
  align-items: center;
  margin-top: 260px;
  bottom: 0;
  height:40px;
}

.clubInfo {
    margin: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>
